{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>IProute</title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {
            overflow: hidden;
            margin: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .input {
            position: fixed;
            z-index: 99;
            margin: 24px;
            display: flex;
            flex-wrap: wrap;
            width: 320px;
        }

        #source_ip, #target_ip {
            justify-content: center;
            padding: 6px;
            font-size: 18px;
            border-radius: 2px;
            color: #333;
            width: 200px;
            /* float: left; */
        }

        #submit {
            display: none;
            margin-left: 12px;
            justify-content: center;
            padding: 5.5px 8px 5.5px 8px;
            font-size: 16px;
            border-radius: 2px;
            color: #333;
        }

        #wait {
            color: #000;
            display: none;
            margin-top: 18px;
            opacity: 0.75;
            width: 316px;
        }

        .span {
            display: block;
            font-size: 15px;
            margin-bottom: 2;
        }

        .detail-span {
            margin-bottom: 10px;
        }


    </style>
</head>

<body>
<div id="map"></div>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<script src="https://unpkg.com/@antv/l7"></script>
<script>


    isInput = () => {
        var btn = document.getElementById('submit')
        btn.style.display = 'block'
    }

    get = (btn) => {
        var target_ip = document.getElementById('target_ip').value
        var wait = document.getElementById('wait')
        btn.innerHTML = '正在追踪'
        btn.style.color = '#666'
        btn.style.cursor = 'not-allowed'
        btn.style.pointerEvents = 'none'
        wait.style.display = 'block'
        wait.innerHTML = '根据结点个数和线路时延，平均用时约1~5分钟，请等待...'
        fetch("getRoute?ip=" + target_ip)
            .then(res => res.json())
            .then(data => {
                console.log(data);
                document.getElementById('map').innerHTML = ''
                drawRoute(data)
                btn.innerHTML = '确定'
                btn.style.color = '#333'
                btn.style.cursor = 'auto'
                btn.style.pointerEvents = 'auto'
            })
    }

    drawRoute = (data) => {
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                pitch: 0,
                style: 'light',
                center: [107.77791556935472, 35.443286920228644],
                zoom: 2.9142882493605033
            })
        });
        const flydata = eval(data.route).map(item => {
            const latlng1 = item.from.split(',').map(e => {
                return e * 1;
            });
            const latlng2 = item.to.split(',').map(e => {
                return e * 1;
            });
            return {coord: [latlng1, latlng2]};
        });

        const layer = new L7.LineLayer({})
            .source(flydata, {
                parser: {
                    type: 'json',
                    coordinates: 'coord'
                }
            })
            .color('#b97feb')
            // .shape('arc3d')
            .size(1.5)
            .active(true)
            .animate({
                interval: 1.2,
                trailLength: 1.8,
                duration: 1
            })
            .style({
                opacity: 1
            });
        const dotPoint = new L7.PointLayer()
            .source(data.dot, {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            })
            .shape('circle')
            .color('#abc7e9')
            .animate({
                    speed: 0.8
                }
            )
            .size(30)
            .style({
                opacity: 1.0
            });
        scene.addLayer(layer);
        scene.addLayer(dotPoint);
        showDetail(data)
    }


    showDetail = (data) => {
        var wait = document.getElementById('wait')
        var location = data.local.map((loc, index) => {
            return loc.from
        })
        location.push(data.local[data.local.length - 1].to)
        var ips = data.local.map((loc, index) => {
            return loc.fromIP
        })
        ips.push(data.local[data.local.length - 1].toIP)

        var text = ''
        for (let i = 0; i < ips.length; i++) {
            text += `<span class="detail-span span">
        <span class="span">` + location[i] + `</span>
        <span class="span">` + ips[i] + `</span>
        </span>`
        }
        wait.innerHTML = text
        wait.style.display = 'block'
    }


    firstLoad = () => {
        fetch("static/route.json")
            .then(res => res.text())
            .then(data => {
                data = JSON.parse(data)
                drawRoute(data)
            });
    }

    firstLoad()


</script>

<div class="input">
    <input id="source_ip" type="text" placeholder="输入源ip"/>
    <input id="target_ip" type="text" placeholder="输入目标ip" oninput="isInput()"/>
    <button id="submit" onclick="get(this)">确定</button>
    <span id="wait"></span>
</div>

</body>

</html>